<!DOCTYPE html>
<html>

<head>
    <style>
        .abc {
            display: inline-block;
        }

        .abc a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
    </style>
</head>

<body>

    <h1>简单分页</h1>

    <div class="abc">
        <!-- <a href="clickPage(1)">«</a> -->
        <a href="javascript:clickPage(0)">«</a>
        <a href="javascript:clickPage(0)">1</a>
        <a href="javascript:clickPage(1)">2</a>
        <a href="javascript:clickPage(2)">3</a>
        <a href="javascript:clickPage(3)">4</a>
        <a href="javascript:clickPage(4)">5</a>
        <a href="javascript:clickPage(5)">6</a>
        <a href="javascript:clickPage(5)">»</a>
        <!-- 一单击鼠标，就会出发响应的方法执行，所以不行 -->
        <!-- <input type="text" id="inputPageIndex" onclick="inputPage()"> -->
        <input type="text" id="inputPageIndex">
    </div>

</body>
<script>
    function $(elId){
       return document.getElementById(elId);
    }
    // 也不行，一旦在页面上回车，则自动执行下面的语句
    document.onkeydown = function (e) {
        e = e || event;
        var key = e.keyCode || e.charCode;
        if (key == 13) {
            // inputPage();
            console.log("我在页面上回车了");
        }
    };
    $("inputPageIndex").onkeydown= function (e) {
        e = e || event;
        var key = e.keyCode || e.charCode;
        if (key == 13) {
            inputPage();
        }
    };

    function clickPage(pageIndex) {
        alert("pageIndex=" + pageIndex);
        //后面学会发ajax请求

    }

    function inputPage() {
        var index=$("inputPageIndex").value;
        alert("inputPage="+index);
    }
</script>

</html>
